<template>
  <div class="pageList">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input placeholder="请输入标题内容" v-model="mustQuery.wordTitle" class="input-with-select">
        <el-button slot="append" type="primary" @click="handleSearch()">搜索</el-button>
      </el-input>
    </div>

    <!-- 标签页区域 -->
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(treeTtem,treeIndex) in documentTree" :label="treeTtem.dictLabel" :name="`tab_${treeIndex}`" :key="`tab_${treeIndex}`">
          <!-- 所属类别筛选 -->
          <div class="filter-group">
            <div>所属类别：</div>
            <div class="filter-buttons">
              <el-button 
                size="medium" 
                @click="handleCategoryAll(treeIndex)"
                :class="{ 'is-selected': selectedCategory === 'all' }"
              >
                全部
              </el-button>
              <el-button 
                size="medium" 
                v-for="(item,index) in treeTtem.children" 
                :key="index" 
                @click="handleCategorySelect(item, treeIndex)"
                :class="{ 'is-selected': selectedCategory === item.dictCode }"
              >
                {{item.dictLabel}}
              </el-button>
            </div>
          </div>
          <!-- 所属专业筛选 -->
          <div class="filter-group">
            <div>所属专业：</div>
            <div class="filter-buttons">
              <el-button 
                size="medium" 
                @click="handleMajorAll(treeIndex)"
                :class="{ 'is-selected': selectedMajor === 'all' }"
              >
                全部
              </el-button>
              <el-button 
                size="medium" 
                v-for="(deptItem,deptIndex) in deptData" 
                :key="deptItem.deptId" 
                @click="handleMajorSelect(deptItem, treeIndex)"
                :class="{ 'is-selected': selectedMajor === deptItem.deptId }"
              >
                {{ deptItem.deptName }}
              </el-button>
            </div>
          </div>

          <!-- 分割线 -->
          <div class="divider"></div>

          <!-- 资源卡片 -->
          <div class="resource-card" v-for="(cardItem,cardIndex) in pageList" :key="`card_${cardIndex}`">
            <div class="card-header">
              <div>{{cardItem.wordTitle}}</div>
              <div class="card-actions">
                <el-button size="mini" @click="handlePreview(cardItem)">在线预览</el-button>
                <el-button size="mini" @click="handleDownload(cardItem)">资源下载</el-button>
              </div>
            </div>
            <div class="card-tags">
              <el-button size="small" >{{ cardItem.collageName }}</el-button>
              <el-button size="small" >{{ cardItem.categoryName }}</el-button>
            </div>
            <div class="card-content">
              {{ cardItem.description }}
            </div>
            <!-- 发布人信息 -->
            <div class="card-meta">
              <div><i class="el-icon-user-solid"></i>发布人：{{ cardItem.createByName }}</div>
              <div>发布时间：{{ cardItem.shareTime }}</div>
            </div>
            <!-- 统计数据 -->
            <div class="card-stats">
              <div @click="handleFavorite(cardItem)"><i :class="cardItem.currentUserFavoriteId?'el-icon-star-on':'el-icon-star-off'"></i>{{ cardItem.favoriteCount }}</div>
              <el-divider direction="vertical"></el-divider>
              <div @click="handleRecommend(cardItem)"><i :class="cardItem.currentUserRecommendId?'el-icon-s-promotion':'el-icon-position'"></i>{{ cardItem.recommendCount }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <TheDetail ref="TheDetailRef"/>
  </div>
</template>
<script>
import { documentShareListApi } from '@/api/share/index'
import { documentFavoriteAddApi, documentFavoriteDelApi } from '@/api/favorite'
import { documentRecommendAddApi, documentRecommendDelApi } from '@/api/recommend'
import { downloadFileApi } from '@/api/system/common'
import { useDict } from '@/utils/dict//useDict'
import { getInfo } from '@/api/login'
import { deptAllList } from '@/api/system/dept'

import TheDetail from './TheDetail.vue';
export default {
  name: "teacherShareCenter",
  components: {
    TheDetail
  },
  data() {
    return {
      input: "",
      activeName: 'tab_0',
      documentTree: useDict('document_type'),
      pageList: [],
      deptData: [],
      userId: '',
      mustQuery: {
        wordTitle: '',
        categoryId: '',
        majorId: ''
      },
      selectedCategory: "", // 存储每个标签页的选中类别
      selectedMajor: ""    // 存储每个标签页的选中专业
    };
  },
  async created() {
    this.getDocumentShareList();
    this.getUserInfo();
    this.getDeptAllList();
  },
  methods: {
    getDeptAllList(){
      deptAllList({deptType:'40'}).then(res => {
        this.deptData = res.data
      })
    },

    handlePreview(row) {
      this.$refs.TheDetailRef.handleOpen(row);
    },
    async handleDownload(row) {
      try {
        await downloadFileApi(row.wordId);
        this.$message.success('下载成功');
      } catch (error) {
        this.$message.error('下载失败');
      }
    },

    getUserInfo() {
      getInfo().then(res => {
        this.userId = res.user.userId;
      });
    },
    // 获取文档分享列表
    async getDocumentShareList() {
      try {
        const { rows } = await documentShareListApi(this.mustQuery);
        this.pageList = rows;
      } catch (error) {
        console.error("获取文档分享列表失败:", error);
      }
    },

    handleFavorite(val) {
      let api = null;
      let params = {};
      if (val.currentUserFavoriteId) {
        api = documentFavoriteDelApi;
        params = val.currentUserFavoriteId;
      } else {
        api = documentFavoriteAddApi;
        params = { wordId: val.wordId, userId: this.userId };
      }
      api(params).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.getDocumentShareList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    handleRecommend(val) {
      let api = null;
      let params = {};
      if (val.currentUserRecommendId) {
        api = documentRecommendDelApi;
        params = val.currentUserRecommendId;
      } else {
        api = documentRecommendAddApi;
        params = { wordId: val.wordId, userId: this.userId };
      }
      api(params).then(res => {
        if (res.code === 200) {
          this.getDocumentShareList();
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 类别选择处理
    handleCategorySelect(row, treeIndex) {
      this.pageList = [];
      this.mustQuery.categoryId = row.dictCode;
      this.selectedCategory = row.dictCode;
      this.getDocumentShareList();
    },

    // 类别全部处理
    handleCategoryAll(treeIndex) {
      this.pageList = [];
      this.mustQuery.categoryId = "";
      this.selectedCategory = 'all';
      this.getDocumentShareList();
    },

    // 专业选择处理
    handleMajorSelect(item, treeIndex) {
      this.pageList = [];
      this.mustQuery.majorId = item.deptId;
      this.selectedMajor = item.deptId;  // 更新专业选择状态
      this.getDocumentShareList();
    },

    // 专业全部处理
    handleMajorAll(treeIndex) {
      this.pageList = [];
      this.mustQuery.majorId = "";
      this.selectedMajor = 'all';
      this.getDocumentShareList();
    },

    // 搜索处理
    handleSearch() {
      this.getDocumentShareList();
    }
  },
};
</script>

<style scoped lang="scss">
// 变量定义
$primary-color: #409eff;
$border-color: #e4e7ed;
$text-color: #303133;
$text-secondary: #606266;
$text-tertiary: #8590a6;
$gap-sm: 8px;
$gap-md: 16px;
$gap-lg: 24px;
$radius: 6px;
$shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);

.pageList {
  padding: $gap-lg;
  margin: 0 auto;
  box-sizing: border-box;
}

// 搜索框样式
.search-container {
  margin-top: $gap-md;
  margin-bottom: $gap-lg;
  text-align: center;
  .input-with-select {
    width: 100%;
    max-width: 600px;
    
    ::v-deep .el-input__inner {
      height: 40px;
      border-radius: $radius 0 0 $radius;
      border-right: none;
      box-shadow: $shadow;
    }
    
    ::v-deep .el-button {
      height: 40px;
      border-radius: 0 $radius $radius 0;
      background-color: #409EFF;
      color: #fff;
    }
  }
}

// 筛选区域样式
.filter-group {
  display: flex;
  align-items: center;
  padding: 10px 0;
  
  > div:first-child {
    width: 80px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #272727
  }
  
  .filter-buttons {
    display: flex;
    gap: $gap-sm;
    flex-wrap: wrap;
  }
  
  ::v-deep .el-button {
    font-size: 13px;
    padding: 6px 6px;
    border-radius: 6px;
    border: none;
    transition: all 0.2s ease;
    
    &:not(.is-primary) {
      color: $text-color;
      background-color: #FFFFFF;
      
      &:hover, &.is-selected { // 选中状态与hover样式一致
        background-color: #1890FF;
        border-color: #1890FF;
        color: #FFFFFF;
      }
    }
    
    &.is-primary {
      background-color: #1890FF;
      &:hover {
        background-color: #1890FF;
      }
    }
  }
}

// 分割线样式
.divider {
  width: 100%;
  height: 1px;
  border-top: 1px dashed #dcdfe6;
  margin: $gap-md 0;
}

// 资源卡片样式
.resource-card {
  border: 1px solid $border-color;
  border-radius: $radius;
  padding: $gap-md;
  margin-top: $gap-md;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: #dcdfe6;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $gap-md;
    
    > div:first-child {
      font-size: 16px;
      font-weight: 500;
      color: $text-color;
      line-height: 1.5;
    }
    
    .card-actions {
      display: flex;
      gap: $gap-sm;
    }
  }
  
  .card-tags {
    display: flex;
    gap: $gap-sm;
    
    ::v-deep .el-button {
      font-size: 12px;
      padding: 4px 12px;
      background: #F1F8E6;
      color: $text-secondary;
      border-color: #70B603;
      color: #70B603;
    }
  }
  
  .card-content {
    color: $text-secondary;
    font-size: 14px;
    line-height: 1.7;
    padding: $gap-md 0;
    text-align: justify;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: $gap-md;
  }
  
  .card-meta {
    display: flex;
    gap: 20px;
    padding-bottom: $gap-sm;
    font-size: 13px;
    color: $text-secondary;
  }
  
  .card-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: $gap-sm;
    font-size: 13px;
    color: $text-tertiary;
    
    div {
      display: flex;
      align-items: center;
      gap: 4px;
      
      .el-icon-star-off, .el-icon-position {
        font-size: 14px;
        transition: color 0.2s;
      }
    }
  }
}

::v-deep .el-tabs__nav-wrap::after{
  height: 1px;
  background-color: #EBEBEB;
}

::v-deep .el-button--small{
  border: 1px solid #1E62FF;
  color: #1E62FF;
  padding: 9px 10px;
  font-size: 14px;
  &:hover {
    border: 1px solid #1890FF;
    background-color: #1890FF;
    color: #FFFFFF;
  }
}

// :hover ::v-deep .el-button--small{
//   border: 1px solid #1890FF;
//   background-color: #1890FF;
//   color: #FFFFFF;
// }
</style>
